// subPackages/packageA/shesu/components/caseCause/caseCause.ts
import * as echarts from '../ec-canvas/echarts';
import { getSxLaayTreeAPI } from "../../../api/shesu"


let xData = []
let yData = []
function setOption(chart) {
  let option = {
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      show: false
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 20,
      top: 20,
      containLabel: true
    },
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        inside: true,
        verticalAlign: "top",
        lineHeight: 56,
        show: false
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        label: {
          show: true,
          position: 'insideLeft',
          distance: 10,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 0,
          color: "#666",
          offset: [0, -16],
          formatter: function (params) {
            // console.log(params, "params")
            // return params.name + ' ' + params.value
            return `{a| ${params.name}} {b|${params.value}}`
          },
          fontSize: 12,
          rich: {
            b: {
              color: "#F04040"
            }
          }
        },
        itemStyle: {
          borderRadius: [0, 5, 5, 0]
        },
        data: yData
      }
    ]
  };
  chart.setOption(option);

}


Component({
  options: {
    styleIsolation: "apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    debtorId: {
      type: String,
      value: ""
    },
    companyName: {
      type: String,
      value: ""
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isLoaded: false,
    ec: {
      lazyLoad: true
    },
    emptyFlag: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        setOption(chart);

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;

        this.setData({
          isLoaded: true
        });
        return chart;
      });
    },
    getDatas() {
      getSxLaayTreeAPI({ id: this.data.debtorId, name: this.data.companyName }).then(res => {
        let content = res.content || [];
        if (content.length == 0) {
          this.setData({
            emptyFlag: true
          })
          return
        }
        xData = content.map(item => item.name).reverse()
        yData = content.map(item => item.value).reverse()
        // console.log(xData, "xData")
        // console.log(yData, "yData")
        this.init()
      })
    }
  },
  lifetimes: {
    attached: function () {
      this.ecComponent = this.selectComponent('#mychart-dom-case-cause')
    }
  },
  observers: {
    'debtorId': function () {
      if (this.data.debtorId) {
        this.getDatas()
      }
    }
  },
})